<template>
    <div class='pageModular-box'>
        <ul class="listArr-ul">
            <li class="listArr-li" :class="listI==index?'avitve':''" v-for="(itme,index) in 9" :key="index">
                <div>
                    <!-- 内容 -->
                    <div></div>
                    <!-- 按钮 -->
                    <div class="li-btn-box">
                        <el-button type="primary" @click="listI = index" size="small">预览皮肤</el-button>
                        <el-button size="small">使用皮肤</el-button>
                    </div>
                    <!-- 当前预览 -->
                    <div class="preview-box">
                        <img src="https://cdn-test.imiyun.com/d/cp25/idyun/interactive6c1e05f6dd6d44969dbf9ea60b6248ef.jpg" alt="">
                        <p>当前浏览</p>
                    </div>
                </div>
                <p>极速秒杀</p>
            </li>
        </ul>
    </div>
</template>

<script>
// import xxx from '@/components/comm/xxx.vue';
export default {
    props: [

    ],
    components: {

    },
    computed: {

    },
    data() {
        return {
            listArr: [],
            listI: 0,
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {

    }
};
</script>

<style lang="scss" scoped >
div,ul,li {
    box-sizing: border-box;
}
ul,li {
    list-style: none;
}
.pageModular-box {
    padding: 10px;
    .listArr-ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-left: 20px;
        .listArr-li {
            position: relative;
            cursor: pointer;
            margin: 0px 20px 10px 0;
            > div {
                border: 1px solid #d7d7d7;
                width: 150px;
                height: 240px;
                border-radius: 5px;
            }
            > p {
                width: 100%;
                line-height: 27px;
                font-size: 13px;
                text-align: center;
            }
            .li-btn-box {
                width: 100%;
                height: 35%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                display: none;
                .el-button+.el-button {
                    margin: 0 !important;
                }
                
            }
            .preview-box {
                width: 100%;
                // height: 50%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                text-align: center;
                color: #3388ff;
                display: none;
                img {
                    width: 50px;
                    height: 50px;
                }
            }
            &:hover {
                .li-btn-box {
                    display: flex;
                }
            }       
        }
        .avitve {
            .li-btn-box {
                display: none;
            }       
            .preview-box {
                display: block;
            }
            > div {
                border-color: #3388ff;
            }
            &:hover {
                .li-btn-box {
                    display: none;
                }
            }
        }
    }
}
</style>
<style lang="scss">
    .li-btn-box {
        
    }
</style>